/**
 * 什么是自定义hooks
 *    1. 是一个函数
 *    2. 是一个使用了内置 hooks 的函数
 *    3. 是一个以 use 开头的函数
 *
 * hooks 的作用就是抽离公用的逻辑代码，达到复用的效果
 *    防抖、节流、...
 *
 * 第三方自定义hooks库
 *    1. react-use   https://streamich.github.io/react-use/
 *    2. ahooks      https://ahooks.js.org/zh-CN
 */
import React from "react";
import ReactDOM from "react-dom/client";
import useMount from "./hooks/useMount";
import useTitle from "./hooks/useTitle";
import useBoolean from "./hooks/useBoolean";
import useFullscreen from "./hooks/useFullscreen";

function App() {
  useTitle("张三");

  const [bol, { toggle, setTrue, setFalse }] = useBoolean(true);
  const [isFullscreen, { enterFullscreen, exitFullscreen }] = useFullscreen();

  console.log("App ", isFullscreen);

  useMount(() => {
    console.log("1111");
  });

  function handleClick() {
    enterFullscreen();
  }

  return (
    <div>
      <h1>App</h1>
      <p>{isFullscreen ? "当前是全屏状态" : "不全屏"}</p>
      <p>{JSON.stringify(bol)}</p>
      <button onClick={toggle}>切换勾选</button>
      <button onClick={setTrue}>专门设置为true</button>
      <button onClick={setFalse}>专门设置为false</button>
      <button onClick={handleClick}>全屏网页</button>
      <button
        onClick={() => {
          exitFullscreen();
        }}
      >
        推出全屏网页
      </button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
